<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  年: <input type="text" id="year">
  月: <input type="text" id="month">
  日: <input type="text" id="day">
  <button id="btn">判断</button>
  <input type="text" id="result">
</body>
<script>
  /* 
      1.  年月日的输入判断
          需求:分别在年月日对应的输入框中输入对应的年月日,点击按钮判断,年月日输入是否合法,并将结果输出到结果框

          要求:
          年份: 1000-9999的整数
          月份: 1-12的整数
          日期:
          1 3 5 7 8 10 12   => 31(大月)
          4 6 9 11          => 30(小月)
          2   => 平年二月28  闰年2月29
  */

  // 断点的运用
  // (1)  如果代码在页面时执行,则需要刷新页面(让页面重新加载)  => 触发断点
  // (2)  如果代码在事件(点击)时执行,需要触发事件  (点击触发断点)

  // debugger;    // 如果代码在页面时执行,则需要刷新页面(让页面重新加载)  => 触发断点
  // 1. 获取元素
  var yearInp = document.getElementById("year");  // 年份输入框
  var monthInp = document.getElementById("month");
  var dayInp = document.getElementById("day");
  var resultInp = document.getElementById("result");
  var btn = document.getElementById("btn");
  console.log(yearInp, monthInp, dayInp, resultInp, btn);

  // 2. 绑定点击事件(点击事件在页面加载时不执行,点击时才执行)  =>  点击按钮的时候 进行判断
  btn.onclick = function () {
    // alert(11111);

    // debugger;   // (2)  如果代码在事件(点击)时执行,需要触发事件  (点击触发断点)

    // 3. 点击取值 
    var year = yearInp.value; // 年份输入框的value值
    var month = monthInp.value;
    var day = dayInp.value;
    console.log(year, month, day);   // 字符串类型

    // if(isYearOk(year)){
    //     if(isMonthOk(month)){
    //         if(isDayOK(year,month,day)){
    //             resultInp.value = "日期合法";
    //         }else{
    //             resultInp.value = "请输入正确的日期";
    //         }
    //     }else{
    //         resultInp.value = "请输入1-12之间的月份";
    //     }
    // }else{
    //     resultInp.value = "请输入1000-9999之间的年份";
    // }

    // 先判断年份是否出错
    // 再判断月份是否出错
    // 再判断日期是否出错
    // 否则 正确的
    // if(isYearOk(year) == false){ // isYearOk(year) == false  => !isYearOk(year)
    //     resultInp.value = "请输入1000-9999之间的年份";
    // }else if(isMonthOk(month) == false){
    //     resultInp.value = "请输入1-12之间的月份";
    // }else if(isDayOK(year,month,day) == false){
    //     resultInp.value = "请输入正确的日期";
    // }else{
    //     resultInp.value = "日期合法";
    // }

    // if(isYearOk(year)){}else{}    等价于 isYearOk(year)==true
    // if(!isYearOk(year)){}else{}    等价于 isYearOk(year)==false

    if (!isYearOk(year)) { // 等价于 isYearOk(year) == false 
      resultInp.value = "请输入1000-9999之间的年份";
    } else if (isMonthOk(month) == false) {
      resultInp.value = "请输入1-12之间的月份";
    } else if (isDayOK(year, month, day) == false) {
      resultInp.value = "请输入正确的日期";
    } else {
      resultInp.value = getTotalDay(year, month, day);
    }




  }

  function isRun(year) {
    // var year = 2000;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      return true;
    } else {
      return false;
    }
  }

  function isYearOk(year) {
    // var year = yearInp.value; // 年份输入框的value值
    // if(year >= 1000 && year <= 9999 && year % 1 == 0){
    //     return true;
    // }else{
    //    return false;
    // }
    return year >= 1000 && year <= 9999 && year % 1 == 0 ? true : false;
  }

  function isMonthOk(month) {
    // var month = monthInp.value;
    // if(month >= 1 && month <= 12  && month % 1 ==0){
    //     return true;
    // }else{
    //     return false;
    // }

    return month >= 1 && month <= 12 && month % 1 == 0 ? true : false;
  }

  function isDayOK(year, month, day) {
    // var day = dayInp.value;
    var maxDay = null; // 变量 提前声明
    switch (month * 1) {
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12:
        maxDay = 31;
        break;
      case 4:
      case 6:
      case 9:
      case 11:
        maxDay = 30;
        break;
      case 2:
        // if(year % 4 ==0 && year % 100 != 0  || year % 400 == 0){ // 闰年
        //     maxDay = 29;
        // }else{ //平年
        //     maxDay = 28;
        // }

        // if(isRun(year)){  //isRun(year) == true
        //     maxDay = 29;
        // }else{
        //     maxDay = 28;
        // }

        maxDay = isRun(year) ? 29 : 28;

        break;
      default:
        // alert("出现了意料之外的情况!");
        break;
    }

    // 7. 判断对应的月份 日期是否在有效范围之间
    if (day >= 1 && day <= maxDay && day % 1 == 0) {
      return true;
    } else {
      return false;
    }
  }

  function getTotalDay(year, month, day) {
    // // 3. 点击取值 
    // var year = yearInp.value; // 年份输入框的value值
    // var month = monthInp.value * 1;
    // var day = dayInp.value * 1;
    // console.log(year, month, day);   // 字符串类型

    // 4. 只要知道年份  => 平年/闰年  => 二月份的天数
    // var febDay = 28;  //默认平年(二月 28)
    // if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {  //闰年
    //     febDay = 29;
    // }

    var febDay = isRun(year) ? 29 : 28;

    // 2020-6-1   // 第n月 = 前n-1个月的天数和 + 当前月的日期day
    var sum = 0;
    switch (month * 1) {
      case 12:
        sum += 30; // 11月的 30天
      case 11:
        sum += 31; // 10月的 31天
      case 10:
        sum += 30; // 9月的 30天
      case 9:
        sum += 31; // 8月的 31天
      case 8:
        sum += 31; // 7月的 31天
      case 7:
        sum += 30; // 6月的 30天
      case 6:
        sum += 31; // 5月的 31天
      case 5:
        sum += 30; // 4月的 30天
      case 4:
        sum += 31; // 3月的 31天
      case 3:
        sum += febDay; // 2月的 febDay
      case 2:
        sum += 31; // 1月的 31天
      case 1:
        sum += day * 1;
        break;
      default:
        alert("出现了意料之外的情况");
        break;
    }
    return sum;
  }



</script>

</html>